import React from 'react'
import {NavLink,Routes,Route,Navigate} from 'react-router-dom'
import Home from './pages/Home'
import About from './pages/About'
import Messages from './pages/Messages'
import News from './pages/News'
export default function App() {
  return (
    <div>
    <div className="row">
        <div className="col-xs-offset-2 col-xs-8">
            <div className="page-header">
                <h2>React Router Demo</h2>
            </div>
        </div>
    </div>
    <div className="row">
        <div className="col-xs-2 col-xs-offset-2">
                  <div className="list-group">
                      {/* 路由组件跳转 */}
                <NavLink className="list-group-item" to="/about">About</NavLink>
                <NavLink className="list-group-item" to="/home">Home</NavLink>
            </div>
        </div>
        <div className="col-xs-6">
            <div className="panel">
                <div className="panel-body">
                    <Routes>                      {/* 重定向 */}
                              <Route path={"/"} element={<Navigate to={'/home'} />}>home</Route> 
                              <Route path={'/home'} element={<Home />}>
                                  <Route index element={<Navigate to={'message'}/>}></Route>
                                  <Route path={'news'} element={<News/>}></Route>
                                  <Route path={'message'} element={<Messages/>}></Route>
                              </Route>
                              <Route path={'/about'} element={<About/>}></Route>

                    </Routes>
                    
                </div>
            </div>
        </div>
    </div>
</div>
  )
}
